<template>
  <view class="container">
    <!-- <view class="header">
      <text class="title">移动端开播</text>
      <view class="steps">
        <view class="step">
          <text class="step-text">第1步：下载POLYV应用</text>
          <button class="download-button">立即下载</button>
        </view>
        <view class="step">
          <text class="step-text"
            >第2步：联系和大运营人员获取开播账号及密码，并登录直播间开播。</text
          >
        </view>
      </view>
    </view> -->
    <view class="content">
      <view class="section">
        <text class="section-title">移动端开播</text>
        <view class="pc-steps">
          <text class="pc-step">第1步：下载POLYV应用</text>
          <button class="download-button" @click="copyAndOpenLink">
            立即下载
          </button>
          <text class="pc-step"
            >第2步：联系和大运营人员获取开播账号及密码，并登录直播间开播。</text
          >
        </view>
        <image
          class="section-image"
          mode="aspectFit"
          @tap="previewImage"
          data-url="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250504/2034d43c8c655735e540fc3fa241a1c9.png"
          src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250504/2034d43c8c655735e540fc3fa241a1c9.png"
        />
      </view>
      <view class="section">
        <text class="section-title">PC端网页开播</text>
        <view class="pc-steps">
          <text class="pc-step"
            >第1步：联系和大运营人员获取网页开播地址、开播账号及密码。</text
          >
          <text class="pc-step">第2步：进入直播间开播。</text>
        </view>
        <image
          class="section-image2"
          mode="aspectFit"
          @tap="previewImage"
          data-url="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250504/1b75253d7d680e3bb35a427992acaca9.png"
          src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250504/1b75253d7d680e3bb35a427992acaca9.png"
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      link: "https://m.polyv.net/download/live/?appScheme=plvapp%3A%2F%2Flive.polyv.net%2Fstreamer%3Fparam%3DeyJjaGFubmVsIjo1NzY4NzYwLCJuaWNrIjoi6K6y5biIIiwicHdkIjoidEdxVTYxIn0%3D", // 你要复制的链接
    };
  },
  methods: {
    copyAndOpenLink() {
      // 1. 复制链接到剪贴板
      uni.setClipboardData({
        data: this.link,
        success: () => {
          uni.showModal({
            title: "提示",
            content: "链接已复制到剪切板，请在浏览器中打开下载链接",
            confirmText: "确定",
          });

          // 2. 复制成功后显示提示
          //   uni.showModal({
          //     title: "提示",
          //     content: "链接已复制，是否在浏览器中打开？",
          //     confirmText: "打开",
          //     cancelText: "取消",
          //     success: (res) => {
          //       if (res.confirm) {
          //         // 3. 用户点击"打开"后，在浏览器中打开链接
          //         this.openInBrowser();
          //       }
          //     },
          //   });
        },
        fail: (err) => {
          uni.showToast({
            title: "复制失败",
            icon: "none",
          });
          console.error("复制失败:", err);
        },
      });
    },
    openInBrowser() {
      // #ifdef H5
      window.open(this.link, "_blank");
      // #endif

      // #ifdef APP-PLUS
      plus.runtime.openURL(this.link);
      // #endif

      // #ifdef MP-WEIXIN
      uni.showModal({
        title: "提示",
        content: "",
        showCancel: false,
      });
      // #endif
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx;
  background-color: #f5f5f5;
}

.header {
  width: 100%;
  margin-bottom: 40rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #9060de;
  text-align: center;
  margin-bottom: 30rpx;
}

.steps {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step-text {
  font-size: 28rpx;
  color: #666;
  text-align: center;
  line-height: 1.5;
}

.download-button {
  width: 339rpx;
  height: 102rpx;
  line-height: 102rpx;
  border-radius: 93rpx;
  background-color: rgba(255, 255, 255, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 30rpx;
  text-align: center;
  font-family: PingFangSC-regular;
  border: 1rpx solid rgba(187, 187, 187, 1);
}

.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40rpx;
}

.section {
  /* background-color: white; */
  border-radius: 20rpx;
  padding: 30rpx;
  width: 100%;
  box-sizing: border-box;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #9060de;
  margin-bottom: 30rpx;
}

.section-image {
  width: 100%;
  height: 800rpx;
  border-radius: 10rpx;
}

.section-image2 {
  width: 100%;
  border-radius: 10rpx;
}

.pc-steps {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin: 30rpx 0;
}

.pc-step {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
}
</style>
